<template>
  <div class="main">
    <div class="header">
      <span>{{ store.cityName }}</span>
      <li>电影</li>
    </div>
    <div class="tabs-bar">
      <li
        :class="{ active: curretStype === 1 }"
        @click="
          curretStype = 1;
          page = 1;
          films = [];
          fetchData();
        "
      >
        正在热映
      </li>
      <li
        :class="{ active: curretStype === 2 }"
        @click="
          curretStype = 2;
          page = 1;
          films = [];
          fetchData();
        "
      >
        即将上映
      </li>
    </div>
  </div>
  <ul class="list" ref="listRef">
    <li
      class="item"
      v-for="item in films"
      :key="item.id"
      @click="goDetail(item.filmId, $event)"
    >
      <img :src="item.poster" alt="" />
      <div class="info">
        <div class="main_title">
          <h2>{{ item.name }}</h2>
          <span>观众评分 {{ item.grade }}</span>
          <span>主演：{{ getActors(item.actors || []) }}</span>
          <span>{{ item.nation }}</span>
        </div>
        <div class="nowPlayingFilm-buy">购票</div>
      </div>
    </li>
  </ul>
</template>

<style lang="scss" scoped>
.list {
  // height: 510px;
  // max-height: 510px;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: auto;
  flex: 1;
}

.item {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  height: 94px;
  padding: 8px 0px;
  border-bottom: 1px solid #ededed;
  overflow: hidden;
  box-sizing: border-box;
}

img {
  width: 60px;
  height: 80px;
}
.info {
  width: 80%;
  margin-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fixdd {
  position: fixed;
  background: #fff;
  width: 100%;
}

.main_title {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.list span {
  font-size: 12px;
  color: #797d82;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

h2 {
  max-width: calc(100% - 25px);
  color: #191a1b;
  font-size: 13px;
  height: 22px;
  margin-right: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.nowPlayingFilm-buy {
  padding: 5px;
  color: #ff5f16;
  font-size: 13px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #ff5f16;
  cursor: pointer;
}

.tabs-bar {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  border-top: 1px solid #ededed;
}

.tabs-bar li {
  padding: 16px;
  font-size: 12px;
}

li a {
  color: #797d82;
}

.active {
  color: #ff5f16;
  border-bottom: 1px solid #ff5f16;
}

.header {
  width: 50%;
  height: 50px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 20px;
}

.main {
  overflow-x: hidden;
}
</style>

<script setup>
import { userStore } from "@/stores/user";
import { getMovies } from "@/api/mm";
import { onMounted, onBeforeUnmount, ref } from "vue";
import { useRouter } from "vue-router";

const films = ref([]);
const curretStype = ref(1);
const router = useRouter();
const page = ref(1);
const loading = ref(false);
const listRef = ref();
const totalPage = ref("");

const store = userStore();
const cityId = store.cityId;

const fetchData = async () => {
  console.log(
    `加载:cityId ${cityId},pageNum ${page.value},type ${curretStype.value}`
  );
  loading.value = true;
  const data = (
    await getMovies({
      cityId: cityId,
      pageNum: page.value,
      pageSize: 10,
      type: curretStype.value,
    })
  ).data;

  // 计算一共有几页数据
  totalPage.value = Math.ceil(data.total / 10);

  films.value.push(...data.films);
  loading.value = false;
};

const handleScroll = () => {
  const clientHeight = listRef.value.clientHeight; // 可视区域高度
  const scrollHeight = listRef.value.scrollHeight; // 文档高度
  const maxScrollTop = scrollHeight - clientHeight - 10;
  const scrollTop = listRef.value.scrollTop;

  // 是否加载下一页

  if (
    scrollTop >= maxScrollTop &&
    !loading.value &&
    page.value < totalPage.value
  ) {
    page.value++;
    fetchData();
  }
};

const goDetail = (id, event) => {
  if (event.target.className === "nowPlayingFilm-buy") {
    router.push(`/film/${id}/cinemas`);
  } else {
    router.push(`film/${id}`);
  }
};

const getActors = (actors) => {
  return actors.map((item) => item.name).join(" ");
};

onMounted(() => {
  fetchData();
  listRef.value.addEventListener("scroll", handleScroll);
});

onBeforeUnmount(() => {
  listRef.value.removeEventListener("scroll", handleScroll);
});
</script>
